<template>
  <div>
    <!-- v-model 只是帮助我们简化了代码，本质还是单向数据流，通过 value 和 @input 实现 -->
    <h3>使用v-model</h3>
    <input type="text" v-model="message" />
    <h3>使用value+@input</h3>
    <p style="color: green">{{ message }}</p>
    <!-- 不使用 v-model 的写法 -->
    <input type="text" :value="message" @input="handleChange" />
    <p style="color: orange">{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello",
    };
  },
  methods: {
    // 不使用 v-model 实现 v-model效果
    handleChange(e) {
      this.message = e.target.value;
    },
  },
};
</script>
